<template id="ecg">
	<div ref="ecgContent" class="ecgContent" id="ecgContent" :style="{ width: width + 2 + 'px', height: height + 'px' }">
		<canvas ref="ecgCanvas" id="ecgCanvas" v-if="show" style="width: 100%"></canvas>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ecgList: [],
				show: true,
				canvas: null,
				lineColor: ['#c7dff5', '#63b3f8'],
				ampTime: '抗干扰AI处理 Amp: 10mm/mv  Time: 25mm/sec',
				textColor: '#000',
				canvasWidth: 100,
				canvasHeight: 100,
				wave: {
					// ecg
					// 1秒多少个点
					frameSize: 250,
					yMax: 250,
					waveHeight: 100,
					// 每次画几个点
					step: 10,
					// 扫纸速度，1 默认 表示 25mm/s (1秒25个小格子 每个小格子0.04s)。 0.5表示扫纸速度为 12.5mm/s。2表示扫纸速度为 50mm/s。
					speedRatio: 1,
					lineColor: 'red'
				}
			};
		},
		props: {
			tip: {
				type: Boolean,
				default: () => {
					return true;
				}
			},
			width: {
				type: Number,
				default: 240
			},
			height: {
				type: Number,
				default: 750
			},
			ecgData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			maxV: {
				type: Number,
				default: 250
			}
		},
		async mounted() {
			this.ecgList = this.ecgData;
			this.init();
		},
		watch: {
			ecgData(val) {
				this.ecgList = val;
				if (this.canvas) {
					this.$nextTick(() => {
						this.draw();
					});
				}
			}
		},
		methods: {
			init() {
				if (!this.$refs.ecgCanvas) {
					setTimeout(() => {
						this.init();
					}, 50);
					return;
				}

				let canvas = (this.canvas = this.$refs.ecgCanvas);
				// canvas.width = Math.floor(this.width / 50) * 50 + 2 + 15
				//
				canvas.width = 25 * 50 + 2 + 15 + 50; //最后这个50，表示offsetx
				this.canvasWidth = canvas.width;
				canvas.height = 4 * 50 + 2 + 30 + 30;
				this.canvasHeight = canvas.height;
				this.$nextTick(() => {
					setTimeout(() => {
						console.log(this.width, this.height);
						this.draw();
					}, 100);
				});
			},
			draw() {
				var canvas = this.canvas;
				if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					ctx.clearRect(0, 0, this.canvasWidth, this.height);
					var offsetx = 50;
					var offsety = 30;
					var width = this.canvasWidth;
					var height = this.canvasHeight;
					var gridWidth = Math.floor((width - 15 - offsetx) / 50) * 50;
					var gridHeight = Math.floor((height - offsety - 30) / 50) * 50;

					if (!this.tip) {
						offsetx = 1;
						gridHeight = Math.floor(height / 50) * 50;
					}

					ctx.fillStyle = 'rgba(255,255,255,1)';
					ctx.fillRect(offsetx, offsety, width, height);

					var d = 10;

					for (var i = 0; i <= gridWidth / d; i++) {
						if (i % 5 == 0) {
							// ctx.strokeStyle = 'rgba(63, 169, 252,.6)';
							// ctx.lineWidth = 2;
						} else {
							ctx.strokeStyle = '#FFC0CB';
							ctx.lineWidth = 1;
						}
						ctx.beginPath();
						ctx.moveTo(i * d + offsetx, offsety);
						ctx.lineTo(i * d + offsetx, gridHeight + offsety);
						ctx.stroke();
						if (i % 5 == 0) {
							//添加时间坐标
							ctx.font = '12px Arial';
							ctx.fillStyle = 'rgb(0,0,0)';
							ctx.fillText((i * 1) / 25 + 's', i * d + offsetx - 8, gridHeight + 20 + offsety);
						}
					}

					for (var j = 0; j <= gridHeight / d; j++) {
						if (j % 5 == 0) {
							// ctx.strokeStyle = 'rgba(63, 169, 252,.6)';
							// ctx.lineWidth = 2;
						} else {
							ctx.strokeStyle = '#FFC0CB';
							ctx.lineWidth = 1;
						}
						ctx.beginPath();
						ctx.moveTo(offsetx, j * d + offsety);
						ctx.lineTo(gridWidth + offsetx, j * d + offsety);
						ctx.stroke();
					}
					for (var i = 0; i <= gridWidth / d; i++) {
						if (i % 5 == 0) {
							ctx.strokeStyle = '#fdbeb9';
							ctx.lineWidth = 2;
							ctx.beginPath();
							ctx.moveTo(i * d + offsetx, offsety);
							ctx.lineTo(i * d + offsetx, gridHeight + offsety);
							ctx.stroke();
						}
					}
					for (var j = 0; j <= gridHeight / d; j++) {
						if (j % 5 == 0) {
							ctx.strokeStyle = '#fdbeb9';
							ctx.lineWidth = 2;
							ctx.beginPath();
							ctx.moveTo(offsetx, j * d + offsety);
							ctx.lineTo(gridWidth + offsetx, j * d + offsety);
							ctx.stroke();
						}
					}
					if (this.tip) {
						ctx.font = '15px Arial';
						ctx.fillStyle = 'rgb(0,0,0)';
						ctx.fillText(this.ampTime, offsetx, 20);

						ctx.fillText('1.0mv', 0, 11 + offsety);
						ctx.fillText('0.5mv', 0, offsety + 50 + 5);
						ctx.fillText('0', 20, offsety + 100 + 5);
						ctx.fillText('-0.5mv', 0, gridHeight / 2 + offsety + 5 + 50);
						ctx.fillText('-1.0mv', 0, gridHeight + offsety);
					}

					this.drawLine(gridHeight / 2);
				}
			},
			drawLine(zero) {
				var context = this.canvas.getContext('2d');
				//线条颜色为绿色
				context.strokeStyle = '#000';
				//线条粗细为2
				// context.strokeWidth = 0.5;
				context.lineWidth = 1.2;
				// 起始位置
				let x = 50;
				if (!this.tip) {
					x = 1;
				}
				context.moveTo(x, Math.floor(Math.floor(this.height / 15) / 2) * 15);
				context.beginPath();
				/**for循环 */
				// let gap = (this.width - 2) / this.ecgList.length;
				// console.log(gap);
				// if (gap > 1) {
				// 	gap = 1;
				// }
				let gap = 2;
				for (let i = 0; i < this.ecgList.length; i++) {
					let after = this.getPoiont(this.ecgList[i], zero);
					//console.log('after', after, this.ecgList[i]);
					context.lineTo(x, after + 30);
					x += gap;
				}
				context.stroke();
				context.closePath();
			},
			getPoiont(value, zero) {
				let point = zero;
				let max = this.maxV;
				let bl = point / max;
				if (value > 0) {
					point = zero - value * bl;
				} else if (value < 0) {
					point = zero + -value * bl;
				}
				return point;
			}
		}
	};
</script>

<style>
	.ecgContent {
		width: 100%;
		height: 100%;
	}

	#ecgCanvas {
		width: 100%;
		height: 100%;
	}
</style>